<template>
  <div class="questionComment">
    <div class="comment-top">
      <comment-user></comment-user>
    </div>
    <div class="comment-middle">
      <div class="comment-reply">
        <div class="comment-reply-tit">评论回复（2）</div>
        <div class="comment-reply-con">
          <div class="answer-wrap">
            <div class="answer-wrap-item">
              <div class="answer-user">
                <div class="answer-user-left">
                  <img src="https://img.wifenxiao.com/h5-wfx/images/order/peer_row.png" alt="">
                </div>
                <div class="answer-user-right">
                  <div class="name">阿***猴</div>
                  <div class="time">2018年3月23日</div>
                </div>
              </div>
              <div class="comment-info">
                <div class="comment-info-own">目前还没有，以后就不知道了</div>
              </div>
            </div>
  
            <div class="answer-wrap-item">
              <div class="answer-user">
                <div class="answer-user-left">
                  <img src="https://img.wifenxiao.com/h5-wfx/images/order/peer_row.png" alt="">
                </div>
                <div class="answer-user-right">
                  <div class="name">阿***猴</div>
                  <div class="time">2018年3月23日</div>
                </div>
              </div>
              <div class="comment-info">
                <div class="comment-info-reply">回复：<span class="name">小明：</span>目前还没有，以后就不知道了实打实艾斯艾斯的</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="comment-bottom">
      <div class="input-area">
        <input type="text" placeholder="请输入您的评论">
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020-07-15 11:18:14
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020-07-15 11:18:14
   */
  import Vue from 'vue'
  import commentUser from '../components/commentUser'
  export default Vue.extend({
    name: 'index',
    components: {
      commentUser
    },
    methods: {
    }
  })
</script>

<style lang="scss">
  .questionComment{
    .comment-top{
      background: #fff;
      border-radius: 0 0 20px 20px;
      padding:0 30px;
    }
    .comment-middle{
      border-radius: 20px;
      background: #fff;
      margin-top: 20px;
      padding: 35px 30px;
      .comment-reply{
        &-tit{
          font-size: 28px;
          color: #333;
          margin-bottom: 10px;
        }
        &-con{
          .answer-wrap{
            &-item{
              padding: 30px 0;
              &:last-child{
                border-bottom: none;
              }
              .answer-user{
                font-size: 0;
                &-left{
                  width: 70px;
                  height: 70px;
                  display: inline-block;
                  vertical-align: top;
                  border-radius: 50%;
                  overflow: hidden;
                  box-shadow: 0 1px 10px #eee;
                  margin-right: 20px;
                  img{
                    width: 100%;
                    height: 100%;
                  }
                }
                &-right{
                  vertical-align: top;
                  display: inline-block;
                  font-size: 22px;
                  color: #999;
                  .name{
                    color: #333;
                    font-weight: bold;
                    font-size: 26px;
                    line-height: 36px;
                    margin-bottom: 4px;
                  }
                }
              }
              .comment-info{
                padding: 20px 25px;
                line-height: 36px;
                margin-left: 90px;
                background:rgba(247,247,247,1);
                border-radius:0px 20px 20px 20px;
                margin-top: 17px;
                font-size: 26px;
                .name{
                  color: #4E75EC;
                }
              }
            }
          }
        }
      }
    }
    .comment-bottom{
      height: 108px;
      position: fixed;
      width: 100%;
      max-width: 750px;
      background: #fff;
      bottom: 0;
      left: 0;
      .input-area{
        width: 690px;
        margin: 16px auto;
        height: 76px;
        background: #F7F7F7;
        padding: 25px;
        border-radius: 40px;
        input{
          font-size: 26px;
          background: #F7F7F7;
          width: 100%;
          padding: 0 10px;
        }
      }
    }
  }
</style>
